<!-- 筛选下拉菜单 -->
<template>
  <div class="dropdown-wrapper">
    <template v-if="hasSlot">
      <slot name="trigger"> </slot>
    </template>
    <template v-else> </template>
    <div
      class="dropdown-trigger flex items-center px-3 border-1 cursor rounded-md"
      :class="itemClass"
      :data-filter="label"
      @click.stop="$emit('toggle')"
    >
      <span class="text-3.5 pr-1">{{ title }}</span>
      <el-icon size="14" color="#666">
        <template v-if="label == 'all'"><Filter /></template>
        <template v-else> <ArrowDown /></template>
      </el-icon>
    </div>
    <teleport to="#target-container">
      <transition name="dropdown" mode="out-in">
        <div
          class="dropdown-content pos-absolute transition-all duration-600 ease-in-out" style="z-index: 209"
          :style="dropdownStyle"
          v-click-outside="close"
          v-show="isExpand"
        >
          <div
            class="h-2.05 indicator pos-relative"
            :class="label != 'all' ? 'bg-white border-l border-r' : ''"
            :style="indicatorStyle"
            style="z-index: 206"
          ></div>
          <div
            class="bg-white px-1 border-rounded-lg border-1 border py-5"
            style="transform: translateY(-2px)"
          >
            <slot name="content"></slot>
            <div class="flex justify-between">
              <div class="px-5">
                <div
                  class="flex items-center pb-3 pl-5"
                  style="line-height: 1"
                  v-if="showIndex && isOpen"
                >
                  <label class="text-3.5">所有品牌</label>
                  <div class="flex">
                    <span
                      v-for="(item, index) in firstLetterList"
                      :key="index"
                      class="mx-2 text-3.3 cursor-pointer"
                      :class="{ active: item === firstLetter }"
                      @click="handleFirstLetterClick(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div class="scrollbar"></div>
                <el-scrollbar :height="scrollbarHeight + 'px'">
                  <template v-if="label == 'all'">
                    <div class="flex" v-for="item in filterList" :key="item">
                      <div style="min-width: 100px">
                        <label class="text-3.7">{{item.name}}</label>
                      </div>
                      <div class="flex flex-wrap dropdown-list">
                        <div
                          class="item flex items-center mr-5 cursor-pointer pos-relative"
                          v-for="(child, index) in item.children"
                          :class="{ checked: child.checked }"
                          @click="handleCheck(child)"
                          :key="index"
                        >
                          <span class="pos-absolute left-0">
                            <el-icon class="icon" v-show="child.checked" size="16">
                              <Select />
                            </el-icon>
                          </span>
                          <span class="ml-1 text-3.5 ml-5 text-gray-500">{{
                            child.name
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="flex flex-wrap dropdown-list">
                      <div
                        class="item flex items-center mr-5 cursor-pointer pos-relative"
                        :class="{ checked: item.checked }"
                        @click="handleCheck(item)"
                        v-for="(item, index) in list"
                        :key="index"
                      >
                        <span class="pos-absolute left-0">
                          <el-icon class="icon" v-show="item.checked" size="16">
                            <Select />
                          </el-icon>
                        </span>
                        <span class="ml-1 text-3.5 ml-5 text-gray-500">{{
                          item.name
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-scrollbar>
              </div>
              <div style="min-width: 70px" class="pb-3">
                <div
                  class="flex items-center px-2 py-1.5 text-red-5 cursor-pointer"
                  @click="handleTigeer"
                >
                  <span class="text-3.5 pr-1">{{ isOpen ? "收起" : "展开" }}</span>
                  <el-icon size="14"><ArrowDown /></el-icon>
                </div>
              </div>
            </div>
            <div class="flex justify-center items-center pt-3">
              <el-button type="danger" class="mx-2 border-red" plain>
                确定
                <template v-if="isLoading">
                  <div class="px-2">
                    <div class="dot-loader"><span></span><span></span><span></span></div>
                  </div>
                </template>
                <template v-else
                  ><i class="px-2">({{ produtctNum }}+商品)</i></template
                >
              </el-button>
              <el-button type="" disabled class="mx-2">重置</el-button>
              <el-button type="" class="mx-2" @click.stop="$emit('toggle')">
                关闭
              </el-button>
            </div>
          </div>
        </div>
      </transition>
    </teleport>
  </div>
</template>

<script setup lang="ts">
import { useSlots, ref, onMounted, computed, watchEffect } from "vue";
import { ArrowDown, Select, Filter } from "@element-plus/icons-vue";

const slots = useSlots();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  isExpand: {
    type: Boolean,
    default: false,
  },
  showArrow: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String,
    default: "left",
  },
  delay: { type: Number, default: 200 },
  nums: { type: Object, default: {} },
});

const emit = defineEmits(["toggle", "close"]);

const hasSlot = computed(() => {
  return slots.trigger || slots.default;
});

const itemClass = computed(() => {
  if (props.label === "all") {
    return "bg-gray-100 ";
  } else {
    if (props.isExpand) {
      return "active";
    } else {
      return "";
    }
  }
});
const isOpen = ref(false);
const isLoading = ref(false);
const produtctNum = ref(getRandomInt(1, 1000));
const filterList = ref<any[]>([]);
const list = ref([
  { name: "京东自营", checked: false },
  { name: "旗舰店", checked: false },
]);
const showIndex = computed(() => {
  return props.label === "brand";
});
const dropdownStyle = computed(() => {
  return {
    width: props.nums.width1 + `px`,
    left: props.nums.left1 + `px`,
    minHeight: `300px`,
    top: props.nums.top - 2 + `px`,
  };
});
const indicatorStyle = computed(() => {
  return {
    transform: `translateX(${props.nums.left2 - props.nums.left1}px)`,
    width: props.nums.width2 + `px`,
  };
});
// 首字母索引
const firstLetter = ref(null);
const firstLetterList = ref([
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z",
]);
const getFirstLetter = (name: string) => {
  return name.charAt(0).toUpperCase();
};
const getBrandList = () => {
  return [
    { name: "Apple", checked: false },
    { name: "小米（MI）", checked: false },
    { name: "华为（HUAWEI）", checked: false },
    { name: "vivo", checked: false },
    { name: "OPPO", checked: false },
    { name: "荣耀（HONOR）", checked: false },
    { name: "真我（realme）", checked: false },
    { name: "三星（SAMSUNG）", checked: false },
    { name: "一加", checked: false },
    { name: "努比亚（nubia）", checked: false },
    { name: "魅族（meizu）", checked: false },
    { name: "诺基亚（NOKIA）", checked: false },
    { name: "摩托罗拉（Motorola）", checked: false },
    { name: "iPhone", checked: false },
    { name: "iQOO", checked: false },
    { name: "Hi nova", checked: false },
    { name: "ROG", checked: false },
    { name: "ORPO", checked: false },
    { name: "360 OS", checked: false },
    { name: "蓝狐（BLUEFOX）", checked: false },
    { name: "怀类 HURAIEI", checked: false },
    { name: "采货侠 ABC", checked: false },
    { name: "索尼（SONY）", checked: false },
    { name: "HVEI", checked: false },
    { name: "OPRD", checked: false },
    { name: "新荣耀", checked: false },
    { name: "华之荣耀", checked: false },
    { name: "谷歌（Google）", checked: false },
    { name: "HW", checked: false },
    { name: "红米", checked: false },
    { name: "悦享荣耀", checked: false },
    { name: "8849", checked: false },
    { name: "HUERI", checked: false },
    { name: "红魔", checked: false },
    { name: "HUANMEI", checked: false },
    { name: "NOTHING", checked: false },
    { name: "Wiko", checked: false },
    { name: "爱回收", checked: false },
    { name: "徕卡（Leica）", checked: false },
    { name: "中兴（ZTE）", checked: false },
    { name: "SPREAD & MUSIC", checked: false },
    { name: "努比亚红魔", checked: false },
    { name: "蔚来", checked: false },
    { name: "海信（Hisense）", checked: false },
    { name: "蓝讯", checked: false },
    { name: "VERTU", checked: false },
    { name: "金酷威", checked: false },
    { name: "夏普", checked: false },
    { name: "itel", checked: false },
    { name: "华硕（ASUS）", checked: false },
    { name: "VIVOAIR", checked: false },
    { name: "AGM", checked: false },
    { name: "HWHR", checked: false },
    { name: "畅享荣耀", checked: false },
    { name: "影问", checked: false },
    { name: "新荣耀尊享", checked: false },
    { name: "唯卓仕（VILTROX）", checked: false },
    { name: "斯文婉", checked: false },
    { name: "汉印（HPRT）", checked: false },
    { name: "金贝（JINBEI）", checked: false },
    { name: "嘉华彩（JIAHUACAI）", checked: false },
    { name: "Rtako", checked: false },
    { name: "惠普（HP）", checked: false },
    { name: "微软（Microsoft）", checked: false },
    { name: "硕图", checked: false },
    { name: "wonew", checked: false },
    { name: "伟峰（WEIFENG）", checked: false },
    { name: "纪曼图", checked: false },
    { name: "百诺（Benro）", checked: false },
    { name: "准儿（JoneR）", checked: false },
    { name: "黑猫日记", checked: false },
    { name: "Hobolite", checked: false },
    { name: "FETANA", checked: false },
    { name: "YZZCAM", checked: false },
    { name: "羽克（Yuke）", checked: false },
    { name: "轻装时代", checked: false },
    { name: "Tonino Lamborghini", checked: false },
    { name: "尚谱", checked: false },
    { name: "SueFer", checked: false },
    { name: "摩斐", checked: false },
    { name: "JJC", checked: false },
    { name: "智国者（WITGOER）", checked: false },
    { name: "科漫（COMAN）", checked: false },
    { name: "思锐（SIRUI）", checked: false },
    { name: "欧奇（OUQI）", checked: false },
    { name: "W&P", checked: false },
    { name: "小天", checked: false },
    { name: "IMVP", checked: false },
    { name: "金蝌灵跃", checked: false },
    { name: "skingcond", checked: false },
    { name: "斯泰克（stiger）", checked: false },
    { name: "云腾（YUNTENG）", checked: false },
    { name: "斯莫格（SmallRig）", checked: false },
    { name: "爱国者（aigo）", checked: false },
    { name: "胖牛", checked: false },
    { name: "喵喵机", checked: false },
    { name: "智慧熊", checked: false },
    { name: "奔图（PANTUM）", checked: false },
    { name: "ulanzi", checked: false },
    { name: "科大讯飞（iFLYTEK）", checked: false },
    { name: "神牛（Godox）", checked: false },
  ];
};
const getSaleTypeList = () => {
  return [
    { name: "京东自营", checked: false },
    { name: "旗舰店", checked: false },
  ];
};
const getCategoryList = () => {
  return [
    { name: "手机", checked: false },
    { name: "电脑", checked: false },
    { name: "电脑周边", checked: false },
    { name: "手机周边", checked: false },
    { name: "电脑", checked: false },
    { name: "电脑周边", checked: false },
    { name: "手机周边", checked: false },
  ];
};
const getCpuTypeList = () => {
  return [
    { name: "Intel", checked: false },
    { name: "AMD", checked: false },
    { name: "华硕", checked: false },
    { name: "苹果", checked: false },
    { name: "小米", checked: false },
    { name: "华为", checked: false },
    { name: "联想", checked: false },
    { name: "戴尔", checked: false },
    { name: "惠普", checked: false },
    { name: "三星", checked: false },
    { name: "索尼", checked: false },
    { name: "魅族", checked: false },
    { name: "OPPO", checked: false },
    { name: "vivo", checked: false },
    { name: "一加", checked: false },
    { name: "realme", checked: false },
    { name: "锤子", checked: false },
    { name: "努比亚", checked: false },
    { name: "金立", checked: false },
    { name: "美图", checked: false },
    { name: "360", checked: false },
    { name: "中兴", checked: false },
    { name: "酷派", checked: false },
    { name: "联想", checked: false },
    { name: "金立", checked: false },
    { name: "美图", checked: false },
    { name: "360", checked: false },
    { name: "中兴", checked: false },
    { name: "酷派", checked: false },
  ];
};
const getAllFilterList = () => {
  return [
    {
      name: "品牌",
      children: getBrandList(),
    },
    {
      name: "分类",
      children: getCategoryList(),
    },
    {
      name: "成色",
      children: [
        { name: "全新", checked: false },
        { name: "99成新", checked: false },
        { name: "95成新", checked: false },
        { name: "9成新", checked: false },
        { name: "8成新", checked: false },
        { name: "7成新", checked: false },
      ],
    },
    {
      name: "CPU型号",
      children: getCpuTypeList(),
    },
    {
      name: "来源渠道",
      children: [
        { name: "淘宝", checked: false },
        { name: "京东", checked: false },
        { name: "苏宁易购", checked: false },
        { name: "唯品会", checked: false },
        { name: "拼多多", checked: false },
        { name: "京东白条", checked: false },
        { name: "苏宁易购白条", checked: false },
        { name: "唯品会白条", checked: false },
      ],
    },
    {
      name: "运行内存",
      children: [
        { name: "1G", checked: false },
        { name: "2G", checked: false },
        { name: "3G", checked: false },
        { name: "4G", checked: false },
        { name: "5G", checked: false },
        { name: "6G", checked: false },
        { name: "7G", checked: false },
        { name: "8G", checked: false },
        { name: "9G", checked: false },
      ],
    },
    {
      name: "内存大小",
      children: [
        { name: "4G", checked: false },
        { name: "8G", checked: false },
        { name: "16G", checked: false },
        { name: "32G", checked: false },
        { name: "64G", checked: false },
      ],
    },
    {
      name:'屏幕尺寸',
      children:[
        {
          name:'5.5英寸',
          value:5.5,
          checked:false
        },
        {
          name:'6.5英寸',
          value:6.5,
          checked:false
        },{
          name:'7.5英寸',
          value:7.5,
          checked:false
        },{
          name:'8.5英寸',
          value:8.5,
          checked:false
        },{
          name:'9.5英寸',
          value:9.5,
          checked:false
        },{
          name:'10.5英寸',
          value:10.5,
          checked:false
        },{
          name:'11.5英寸',
          value:11.5,
          checked:false
        },{
          name:'未上市',
          value:12.5,
          checked:false
        }        
      ]
    }
    ,{
      name:'屏幕分辨率',
      children:[
        {
          name:'1920*1080',
          value:1920,
          checked:false
        },{
          name:'1920*1080',
          value:1920,
          checked:false
        },{
          name:'1920*1080',
          value:1920,
          checked:false
        },{
          name:'1920*1080',
        }
      ]
    },{
      name:'屏幕材质',
      children:[
        {
          name:'1920*1080',
          value:1920,
          checked:false
        },{
          name:'1920*1080',
          value:1920,
          checked:false
        },{
          name:'1920*1080',
          value:1920,
          checked:false
        },{
          name:'1920*1080',
        }
      ]
    },{
      name:'后摄主像素',
      children:[
        {
          name:'2亿像素',
          value:2000,
          checked:false
        },{
          name:'1.6亿像素',
          value:2000,
          checked:false
        },{
          name:'1.2亿像素',
          value:2000,
          checked:false
        },{
          name:'1亿像素',
          value:2000,
          checked:false
        },{
          name:'800万像素',
          value:2000,
          checked:false
        },{
          name:'600万像素',
          value:2000,
          checked:false
        }
        ,{
          name:'500万像素',
          value:2000,
          checked:false
        }
      ]
    },{
      name:'电池容量',
      children:[
        {
          name:'7000Ah及更高',
          value:2000,
          checked:false
        },
        {
          name:'5000Ah及更高', value:2000,
          checked:false
        },
        {
          name:'4000Ah及更高', value:2000,
          checked:false
        },
        {
          name:'3000Ah及更高', value:2000,
          checked:false
        },
        {
          name:'2000Ah及更高', value:2000,
          checked:false
        },
        {
          name:'1000Ah及更高', value:2000,
          checked:false
        }
      ]
    }
  ];
};
const scrollbarHeight = ref(90);
const handleTigeer = () => {
  isOpen.value = !isOpen.value;
  scrollbarHeight.value = isOpen.value ? 320 : 90;
  console.log(scrollbarHeight.value);
};
const handleFirstLetterClick = (item: any) => {};
const handleCheck = (item: any) => {
  console.log(item);
  isLoading.value = true;
  item.checked = !item.checked;
  setTimeout(() => {
    isLoading.value = false;
    produtctNum.value = getRandomInt(1, 1000);
  }, 1750);
};
watchEffect(() => {
  console.log(props.nums);
  console.log(props.label);
});
const close = () => {
  emit("close");
};
onMounted(async () => {
  console.log(props.label);
  switch (props.label) {
    case "saleType":
      list.value = await getSaleTypeList();
      break;
    case "brand":
      list.value = await getBrandList();
      break;
    case "all":
      filterList.value = await getAllFilterList();

      break;
  }
});
function getRandomInt(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

<style scoped lang="scss">
.dropdown-wrapper {
  position: relative;
  display: inline-block;
  height: 32.5px;

  .dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    z-index: 101;
    position: relative;
    &.active {
      border: 1px solid #e7e5e5;
      background-color: #ffffff;
      border-bottom: 1px solid #ffffff;
      font-weight: 600;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 120px;
    background: white;
    border: 1px solid #eee;
    border-radius: 0 0 4px 4px;
    transform: translateY(-1px);
    z-index: 205;
  }
  .hover {
    background: #ffffff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }
}

.dropdown-list {
  .item {
    padding: 5px 0;
    color: #333;
    &.checked {
      color: #ff0000;
    }
  }
}
/* 过渡动画 */
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
